<!doctype html>

<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" />

<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>May I introduce you to MITK?</title>
      <meta name="description" content="A short introduction into working with the MITK Workbench">
      <meta name="author" content="German Cancer Research Center (DKFZ)">

      <link rel="stylesheet" href="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/css/reveal.css">
      <link rel="stylesheet" href="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/css/theme/MITK.css" id="theme">

      <!-- Code syntax highlighting -->
      <link rel="stylesheet" href="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/lib/css/zenburn.css">
    </head>

    <body>
        <div class="reveal">
            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">

<!-- Main page + navigation help -->
                <section>
                    <section>
                        <br>
                        <br>
                        <br>
                        <br>
                        <h2>May I introduce you to MITK?</h2>
                        <br>
                        <br>
                        <br>
                        <br>
                        <p style="text-align: bottom; color: rgb(144, 144, 144)"><small>For a short explanation of the navigation through the tutorial, press <strong>DOWN</strong>.</small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ArrowDown.png" style="position: absolute; bottom: 5%; right: 5%; width: 5%; box-shadow: none" />
                    </section>
                    <section>
                        <h4>Navigation through the tutorial slides</h4>
                        <p style="text-align: left"><small>In the lower right corner you see <strong>four arrows</strong> for navigation through the slides.</small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ControlArrows.png" style="position: absolute; top: 23%; left: 45%; width: 10%" />
                        <br>
                        <br>
                        <br>
                        <p style="text-align: left"><small>If an arrow turns <strong>bold</strong>, you can follow it in this direction either using your <strong>mouse or keyboard</strong>. </small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MouseTangoStyle.svg" style="position: absolute; bottom: 27%; left: 40%; height: 12%; box-shadow: none" />
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ArrowKeys.png" style="position: absolute; bottom: 27%; right: 37%; height: 12%; box-shadow: none" />
                        <br>
                        <p style="text-align: left"><small>Besides the arrow keys you can also use the <strong>space bar</strong>, </br>to navigate you through all slides.</small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/Spacebar.png" style="position: absolute; bottom: 16%; right: 25%; width: 12%; box-shadow: none" />
                        <p style="text-align: left"><small>When you press "<strong>Esc</strong>", you will see an overview about all the available slides.</small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/Esc.png" style="position: absolute; bottom: 6%; right: 15%; width: 5%; box-shadow: none" />
                        <!-- This seems to not work in the QtWebkit
                        <p style="text-align: left"><small>With <strong>Alt + clicking</strong> on a certain spot in the slide, you can zoom in.</small></p>
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/Alt.png" style="position: absolute; bottom: 5%; right: 26%; width: 5%; box-shadow: none" />
                        <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MousePointerClick.png" style="position: absolute; bottom: 5%; right: 20%; width: 5%; box-shadow: none" />
                        -->
                    </section>
                </section>


<!-- Welcome Page in MITK - 1 -->

                <section>
                    <h3>Welcome Page</h3>
                    <br>
                    <p style="text-align: right;"><small>The first window you will see, is the <br><strong>Welcome Page</strong>!</small></p>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/WelcomePage.png" style="position: absolute; left: 5%; top: 20% ; width: 50%; border: none" />
                    <br>
                    <p class="fragment" data-fragment-index="0" style="text-align: right"><small>You can always reopen it by clicking on <br>"<em>Help</em>" and then "<em>Welcome</em>".<br> To return there from this presentation<br> click the MITK logo in the lower left corner.</small></p>
                    <img class="fragment current-visible" data-fragment-index="0" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/HelpWelcome.png" style="position: absolute; left: 0%; top: 15%; width: 25%; border: none" />
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="1" class="fragment" style="text-align: center"><small>Here you can find links to further on-line tutorials and related documentation.</small></p>
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKArrow.png" style="position: absolute; right: 38%; bottom: 33%; width: 15%; border: none; box-shadow: none; background: none; -webkit-transform: rotate(-145deg); transform: rotate(-145deg)" />
                    <br>
                </section>


<!-- Overview MITK Window - 2 -->

                <section>
                    <h3>Window overview</h3>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ScreenScanPlugins.png" style="position: absolute; left: 5%; top: 15%; width: 50%; border: none" />
                    <br>
                    <p class="fragment" data-fragment-index="0" style="text-align: right"><small>On the upper border you find the <strong>Toolbar</strong><br> with shortcuts to all important functions.</small></p>
                    <img class="fragment current-visible" data-fragment-index="0" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/Toolbar.png" style="position: absolute; top: 15%; left: 0%; width: 90%; border: none" />
                    <br>
                    <p class="fragment" data-fragment-index="1" style="text-align: right"><small>Your images and results appear <br>in the <strong>Display area</strong> in 2D and 3D views.</small></p>
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/DisplayAreaSmall.png" style="position: absolute; left: 13%; top: 17%; width: 35%" />
                    <br>
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="2" style="text-align: left"><small>Tools are called <em>Plugins</em> in MITK. After opening they appear to the sides of the display area by default. </small></p>
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKArrow.png" style="position: absolute; left: 5%; bottom: 20%; width: 10%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); box-shadow: none" />
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKArrow.png" style="position: absolute; left: 45%; bottom: 20%; width: 10%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); box-shadow: none" />
                </section>


<!-- Toolbar  - 3 -->

                <section>
                    <h3>Toolbar</h3>
                    <p class="fragment" data-fragment-index="0" style="text-align: left"><small>You can access the main functions with the buttons on the left side of the toolbar.</small></p>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ScreenWithScan.png" style="position: absolute; bottom: 0%; left: 28%; width: 44%;" data-fragment-index="0" />
                    <div class="fragment current-visible" data-fragment-index="0" style="position: absolute; bottom: 45%; left: 27%; width: 21%; height: 2%; border-radius: 10px 10px 10px 10px; border: 5px solid #2d5a88"></div>
                    <img class="fragment current-visible" data-fragment-index="0" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ToolbarLeft.png" style="position: absolute; left: 3%; bottom: 49%; width: 55%" />
                    <ul class="fragment current-visible" data-fragment-index="0" style="position: absolute; left: 0%; bottom: 15%"><small>
                        <li>Open File</li>
                        <li>Save/Close Project</li>
                        <li>Undo/Redo</li>
                        <li>Image Navigator</li>
                        <li>...</li>
                    </small></ul>
                    <p class="fragment" data-fragment-index="1" style="text-align: right"><small>On the right side you find the available Plugins for working on your data.</small></p>
                    <div class="fragment current-visible" data-fragment-index="1" style="position: absolute; bottom: 45%; right: 34%; width: 17%; height: 2%; border-radius: 10px 10px 10px 10px; border: 5px solid #2d5a88"></div>
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ToolbarRight.png" style="position: absolute; right: 1%; bottom: 49%; width: 60%" />
                    <ul class="fragment current-visible" data-fragment-index="1" style="position: absolute; right: 0%; bottom: 15%"><small>
                        <p><strong>Plugins:</strong></p>
                        <li>Clipping Plane</li>
                        <li>Segmentation Utilities</li>
                        <li>Movie Maker</li>
                        <li>Image Cropper</li>
                        <li>...</li>
                    </small></ul>
                    <p class="fragment" data-fragment-index="2" style="text-align: right"><small>The <strong>help</strong> button can also be found here.</small></p>
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/IconHelp.svg" style="position: absolute; top: 34%; right: 46%; width: 5%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px; border: 2px solid rgb(45, 92, 136);" />
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </section>


<!-- Data Manager - 4 -->

                <section>
                    <h3>Data Manager</h3>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ScreenScanData.png" style="position: absolute; top: 25%; right: 0%; width: 50%; border:none" />
                    <p class="fragment" data-fragment-index="0" style="text-align: left"><small>In the <strong>Data Manager</strong> you get an overview of all your data.</small></p>
                    <img class="fragment current-visible" data-fragment-index="0"src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/IconDataManager.png" style="position: absolute; top: 15%; right: 22%; width: 5%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px; border: 2px solid rgb(45, 92, 136)" />
                    <div class="fragment current-visible" data-fragment-index="0" style="position: absolute; top: 28%; right: 23.7%; width: 1.5%; height: 2.5%; border-radius: 10px 10px 10px 10px; border: 5px solid #2d5a88"></div>
                    <div class="fragment current-visible" data-fragment-index="0" style="position: absolute; top: 30.5%; right: 38.2%; width: 11%; height: 35%; border-radius: 5px 5px 5px 5px; border: 5px solid #2d5a88"></div>
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="1" style="text-align: left"><small>Besides the image itself, additional objects<br> such as <strong>segmentations, 3D models, ...</strong><br> are shown</small></p>
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/DataManagerData.png" style="position: absolute; right: 34%; top: 23%; width: 30%" />
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="2" style="text-align: left"><small>The <strong>Image Navigator</strong> helps to scroll faster through your scans or to navigate to a certain slice.</small></p>
                    <img class="fragment" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/IconImageNavigator.png" style="position: absolute; bottom: 15%; left: 0%; width: 5%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px; border: 2px solid rgb(45, 92, 136)" />
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/ImageNavigator.png" style="position: absolute; bottom: 13%; right: 30%; width: 27%; border: none" />
                </section>


<!-- Display area - 5 -->

                <section>
                    <h3>Display Area</h3>
                    <p class="fragment" data-fragment-index="0" style="text-align: left"><small>Three windows of the display area show you slices from the three different anatomical planes.</small></p>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/DisplayAreaScan.png" style="position: absolute; top: 20%; left: 5%;; width: 48%; border: none" />
                    <p class="fragment" data-fragment-index="0" style="position: absolute; left: 10%; top: 30%;color: rgb(255, 0, 0); transition: all 0.25s ease-in 0.75s; background: black"><strong>axial</strong></p>
                    <p class="fragment" data-fragment-index="0" style="position: absolute; left: 10%; top: 60%; color: rgb(0, 0, 255); transition: all 0.25s ease-in 1.25s; background: black"><strong>coronal</strong></p>
                    <p class="fragment" data-fragment-index="0" style="position: absolute; left: 35%; top: 30%; color: rgb(0, 255, 0); transition: all 0.25s ease-in 1.75s; background: black"><strong>sagittal</strong></p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="2" style="text-align: right; bottom: 30%"><small>On the right side is the <strong>level-window</strong><br> for adjusting the displayed </br>grey level range of the image.</small></p>
                    <br>
                    <br>
                    <br>
                    <p class="fragment" data-fragment-index="1" style="text-align: center"><small>The fourth window shows you the <strong>3D view</strong>.</small></p>
                    <p class="fragment" data-fragment-index="1" style="position: absolute; left: 35%; top: 60%; color: rgb(255, 255, 0); transition: all 0.25s ease-in 0.25s; background: black"><strong>3D</strong></p>
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/Levelwindow.png" style="position: absolute; left: 50%; top: 17%; width: 3%" />
                </section>


<!-- Display Windows - 6 -->

                <section>
                    <h3>Display Windows</h3>
                    <p class="fragment" data-fragment-index="0" style="text-align: left"><small>A <strong>crosshair</strong> is shown in each display window to facilitate the navigation and slice selection.</small></p>
                    <p class="fragment" data-fragment-index="1" style="text-align: right"><small>On the upper right corner you have more options to customize the view,<br> for example if you want to <strong>rotate</strong> the sectional planes.</small></p>
                    <p class="fragment" data-fragment-index="2" style="text-align: right"><small>Here you can also select other <strong>layouts</strong> of the display windows.</small></p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/DisplayWindowAxial.png" style="position: absolute; bottom: 0%; right: 32.5%; width: 35%; border: none" />
                    <img class="fragment current-visible" data-fragment-index="0" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKArrow.png" style="position: absolute; top: 40%; left: 42.3%; width: 15%;-webkit-transform: rotate(90deg); transform: rotate(90deg); background: none; box-shadow: none" />
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/DisplayWindowButtons.png" style="position: absolute; bottom: 40%; right: 31%; width: 7.5%; height: 5%; border-radius: 10px 10px 10px 10px; border: 4px solid #2d5a88" />
                    <img class="fragment" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MousePointerClick.png" style="position: absolute; right: 31%; top: 51%; width: 4%; box-shadow: none; background: none" />
                    <img class="fragment current-visible" data-fragment-index="2" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/LayoutList.png" style="position: absolute; right: 17%; bottom: 3%; width: 23%" />
                    <br>
                    <br>
                </section>


<!-- Operations with the mouse - 7 -->

                <section>
                    <h3>Mouse Navigation</h3>
                    <p><small>Inside the <strong>Display area</strong> you can easily navigate through the images with your mouse.</small></p>
                    <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MouseTangoStyle.svg" style="position: absolute; bottom: 0%; left: 35%; width: 30%; box-shadow: none" />
                    <p class="fragment" data-fragment-index="0" style="position: absolute; top: 47%; left: 0%"><small><strong>Press left and move the cursor:</strong><br>Moves the crosshair in all 3 planes.</small></p>
                    <img class="fragment current-visible" data-fragment-index="0" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKPoint.png" style="position: absolute; width: 4%; bottom: 28%; left: 43.5%; box-shadow: none; background: none" />
                    <p class="fragment" data-fragment-index="1"><small><strong>Scrolling:</strong><br> Scrolls through the slides.</small></p>
                    <img class="fragment current-visible" data-fragment-index="1" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKArrow2.png" style="position: absolute; bottom: 18.5%; left: 46.6%; width: 7%; box-shadow: none; background: none" />
                    <p class="fragment" data-fragment-index="3"><small><strong>Press the scroll wheel and move:</strong><br> Shifts the section you are looking at.</small></p>
                    <br>
                    <img class="fragment current-visible" data-fragment-index="3" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKPoint.png" style="position: absolute; width: 4%; bottom: 30%; left: 48%; box-shadow: none; background: none" />
                    <br>
                    <p class="fragment" data-fragment-index="4" style="position: absolute; right: 0%; top: 47%"><small><strong>Right-Click and moving:</strong><br> Zooms in and out.</small></p>
                    <br>
                    <img class="fragment current-visible" data-fragment-index="4" src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITKPoint.png" style="position: absolute; width: 4%; bottom: 28%; right: 43.5%; box-shadow: none; background: none" />
                    <br>
                    <br>
                    <br>
                </section>


<!-- Last page - 8 -->

                <section>
                    <p>Thank you for downloading MITK!</p>
                    <br>
                    <blockquote><p><small>Press <strong style="color: rgb(249, 145, 87)">F1</strong>, to get fast access <br>to the documentation of the Plugin you're currently using!<br> Try it now inside of the <strong style="color: rgb(45, 92, 136)">Data Manager</strong> Plugin.</small></p></blockquote>
                    <br>
                    <p class="fragment" data-fragment-index="2"><small>Maybe one of the following links could also interest you:</small>
                    <ul class="fragment" data-fragment-index="2"><small>
                        <li><a href="http://docs.mitk.org/Tutorials/OpenSaveClose.html">Load, Save and Close Projects</a></li>
                        <li><a href="http://docs.mitk.org/Tutorials/Navigation.html">Navigation inside MITK</a></li>
                    </small></ul></p>
                    <p class="fragment" data-fragment-index="2" style="text-align: right; color: #2d5a88; transition: all 0.25s ease-in 0.5s">The end!</p>
                </section>
            </div>

<!-- Footer -->
            <a class="mitk-logo" href="qrc:/org.mitk.gui.qt.welcomescreen/mitkworkbenchwelcomeview.html" target="_blank">
                <img src="qrc:/org.mitk.gui.qt.welcomescreen.welcome.tutorial/images/welcome/MITK.png">
            </a>
            <div class="footer">
              German Cancer Research Center (DKFZ) - August 2015 - created using reveal.js
            </div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.js"></script>

        <script>

            // Full list of configuration options available at:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,
                fragments: true,
                transition: 'concave', // none/fade/slide/convex/concave/zoom

                // Optional reveal.js plugins
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true }
                ]
            });

        </script>
    </body>
</html>
